<template>
  <div id="Order">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">订单管理</el-breadcrumb-item>
      <el-breadcrumb-item>订单列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-row>订单数据</el-row>
    <div v-for="item in orderData" :key="item.id" id="orderData">
      <el-col :span="6">
        <span>{{item.name}}</span>
        <span style="color: #b732f5">
          <span>{{item.money}}</span>
          <span>个</span>
        </span>
      </el-col>
    </div>
    <el-row>订单筛选</el-row>
    <div id="orderChose">
      <el-col :span="8">
        <label for="orderId">订单ID</label>
        <el-input
                placeholder="请输入内容"
                v-model="myinput.myOrderId"
                id="orderId"
                clearable>
        </el-input>
      </el-col>
      <el-col :span="8">
        <label for="orderId">订单状态</label>
        <el-select v-model="myinput.orderState" clearable placeholder="请选择">
          <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="8">
        <div class="block">
          <span class="demonstration">支付时间</span>
          <el-date-picker
                  v-model="myinput.orderTime"
                  align="right"
                  type="date"
                  placeholder="选择日期"
                  :picker-options="pickerOptions">
          </el-date-picker>
        </div>
      </el-col>
      <el-col :span="8">
        <label for="channelId">渠道订单ID</label>
        <el-input
                placeholder="请输入内容"
                v-model="myinput.channelId"
                id="channelId"
                clearable>
        </el-input>
      </el-col>
      <el-col :span="8">
        <label for="goodsName">商品名称</label>
        <el-input
                placeholder="请输入内容"
                v-model="myinput.goodsName"
                id="goodsName"
                clearable>
        </el-input>
      </el-col>
      <el-col :span="8">
        <label for="orderId">寄送类型</label>
        <el-select v-model="myinput.sendType" clearable placeholder="请选择">
          <el-option
                  v-for="item in sendTypeOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="8">
        <label for="orderId">拼团订单</label>
        <el-select v-model="myinput.myOrderType" clearable placeholder="请选择">
          <el-option
                  v-for="item in myOrderTypeOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="8">
        <label for="buyerName">收货人姓名</label>
        <el-input
                placeholder="请输入内容"
                v-model="myinput.buyerName"
                id="buyerName"
                clearable>
        </el-input>
      </el-col>
      <el-col :span="8">
        <label for="buyerTel">收货人手机</label>
        <el-input
                placeholder="请输入内容"
                v-model="myinput.buyerTel"
                id="buyerTel"
                clearable>
        </el-input>
      </el-col>
    </div>
    <el-row id="choseBtn">
      <el-button type="primary" round style="width: 100px" >
        查询
      </el-button>
      <el-button type="primary" round>
        导出订单
      </el-button>
    </el-row>
    <el-row>订单列表</el-row>
    <div id="orderList">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="全部" name="first">
          <TableA style="width: 1050px;height:380px;margin: auto"></TableA>
        </el-tab-pane>
        <el-tab-pane label="待回复" name="second">
          <TableB style="width: 1050px;height:380px;margin: auto"></TableB>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
  import http from '../http/http'
  import * as url from '../api/lyp_order_api'
  import TableA from "../components/order_lyp/TableA";
  import TableB from "../components/order_lyp/TableB";
  // import {mapActions} from 'vuex'
  // import {mapGetters} from 'vuex'
  export default {
    name: "Order",
    components:{
      TableA,
      TableB
    },
    data(){
      return {
        orderData:[],
        myinput:{
          myOrderId:'',
          orderState: '',//订单状态
          orderTime: '',//订单时间
          channelId:'',
          goodsName:'',
          sendType:'',
          myOrderType:'',
          buyerName:'',
          buyerTel:''
        },
        options: [
          {value: '选项1', label: '已取消'},
          {value: '选项2', label: '退款中'},
          {value: '选项3', label: '已支付'},
          {value: '选项4', label: '待支付'},
          {value: '选项5', label: '已发货'},
          {value: '选项6', label: '待发货'}
          ],
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          },
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
        },
        sendTypeOptions:[
          {value: '选项1', label: '送货上门'},
          {value: '选项2', label: '快递'},
        ],
        myOrderTypeOptions:[
          {value: '选项1', label: '普通订单'},
          {value: '选项2', label: '拼团订单'},
        ],
        activeName: 'first'

      }
    },
    created(){
      http({
        url:url.GETORDERDATA,
        method:'get'
      }).then(res=>{
        this.orderData=res.data.data
      })

    },
    methods:{
      // ...mapActions(['selectOrder']),
      handleClick(tab, event) {
        console.log(tab, event);
      },

    }
  }
</script>

<style scoped lang="less">
  #orderData{
    .el-row {
      margin: 20px 0;
      &:last-child {
        margin-bottom: 0;
      }
    }
    .el-col {
      border-radius: 4px;
      text-align: right;
      margin-bottom: 10px;
    }
    .grid-content {
      border-radius: 4px;
      min-height: 36px;
    }
    .row-bg {
      padding: 10px 0;
      background-color: #f9fafc;

    }

  }
  #orderChose{
    .el-col{
      padding: 10px 30px;
      text-align: right;
      .el-input{
        width: 200px;
      }
    }
    .el-select,.el-input{
      width: 200px;
    }
  }
  #choseBtn{
    padding: 10px 0 10px 40px;
  }
  #orderList{
    font-size: 18px;
    .el-tab-pane{
      width: 100px;
    }
  }
</style>